<template>
  <el-card class="notice">
    <div ref="testLine" id="testLine" style="width:1300px; height:800px"></div>
  </el-card>
</template>

<script>
// 引入这个json 文件
import chengduMap from '@/assets/Js/chengdu.json'
export default {
  name: 'Map',
  data () {
    return {
      myChart: null,
      option: {
        title: {
          text: '成都市区域地图',
          textStyle: {
            color: '#515f8a'
          }
          // left: 'center'
        },
        geo: {
          type: 'map',
          map: 'CD',
          zoom: 1.1,
          itemStyle: {
            areaColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#efe9e1' // 0% 处的颜色
              }, {
                offset: 1, color: '#e7e2d7' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          emphasis: {
            itemStyle: {
              borderColor: '#1e1e1e',
              borderWidth: 1
            }
          },
          roam: true
        },
        series: [
          {
            name: '成都市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
              { name: '市南点位', value: [120.395966, 36.070892, 50] }
            ],
            symbol: 'pin',
            symbolSize: '30',
            encode: {
              value: 2
            },
            label: {
              formatter: (a) => {
                return `${a.name} ${a.value[2]}`
              },
              position: 'right',
              show: false,
              backgroundColor: '#fff',
              fontSize: 14,
              borderWidth: 1,
              borderRadius: 5,
              height: 80
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    initChart () {
      const {
        myChart,
        option
      } = this
      // 需要注册地区，注意这个名称就是后边引用地图名称QD
      this.$echarts.registerMap('CD', { geoJSON: chengduMap })
      myChart.setOption(option)
    }
  },
  mounted () {
    // 两张引入方式都可以，这里我用ref,注意一定要节点 初始化完成
    // this.myChart = this.$echarts.init(document.getElementById('testLine'))
    this.myChart = this.$echarts.init(this.$refs.testLine)
    this.initChart()
  }
}
</script>

<style>
.notice {
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: 15px 15px 10px -12px #4c61a0;
}
</style>
